<template>
  <div class="app-container">

    <div align="left">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" >
        <span class="demonstration"></span>
        <el-date-picker
          width="50"
          v-model="selectDate"
          value-format="yyyy-MM-dd"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <span style="margin-left: 10px">
          <el-form-item>
            <el-button type="primary" @click="queryResult">查询</el-button>
            <el-button type="primary" @click="addTestDaily">新增</el-button>
          </el-form-item>
        </span>
      </el-form>
    </div>
<!--max-height="500":Table 指定最大高度-->
    <el-table :data="list" max-height="530" border  highlight-current-row >
      <!--      如果表格属性声明为type=index 直接展示为排序-->
      <el-table-column align="center" label="序号" type="index"  width="80"></el-table-column>
      <!--prop绑定需要展示的值-->
      <el-table-column label="记录ID" align="center" v-if="false" width="100" prop="id"></el-table-column>

      <el-table-column label="项目名称" width="150">
        <template slot-scope="scope">
          {{ scope.row.projectName }}
        </template>
      </el-table-column>
      <el-table-column label="测试人员" width="80" >
        <template slot-scope="scope">
          {{ scope.row.tester }}
        </template>
      </el-table-column>
      <el-table-column label="项目进度(%)" width="100">
        <template slot-scope="scope">
          {{ scope.row.testSchedule }}
        </template>
      </el-table-column>
      <el-table-column label="今日测试进展" width="150" type="expand">
        <template slot-scope="scope" >
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="bug分布情况" width="150">
        <template slot-scope="scope">
          {{ scope.row.testBug }}
        </template>
      </el-table-column>

      <el-table-column label="项目变更" width="100">
        <template slot-scope="scope">
          {{ scope.row.requirementsChange }}
        </template>
      </el-table-column>

      <el-table-column label="风险" width="100">
        <template slot-scope="scope">
          {{ scope.row.risk }}
        </template>
      </el-table-column>

      <el-table-column label="明日计划" width="100">
        <template slot-scope="scope">
          {{ scope.row.tomorrowPlan}}
        </template>
      </el-table-column>
      <el-table-column label="群机器人" width="100">
        <template slot-scope="scope">
          {{ scope.row.botName}}
        </template>
      </el-table-column>
      <el-table-column label="测试时间" width="100">
        <template slot-scope="scope">
          {{ scope.row.testTime }}
        </template>
      </el-table-column>
<!--      fixed="right"固定列需要使用fixed属性-->
      <el-table-column fixed="right" label="操作" align="center" width="100" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editTestDaily(scope.row.id)">编辑</el-button>
          <el-button type="text" size="small" @click="testDailyDetail(scope.row.id)">查看</el-button>
<!--          <el-button size="mini" type="danger" @click="deteleteTestDaily(scope.row.id)">删除</el-button>-->
        </template>
      </el-table-column>

    </el-table>
    <!--pagination分页-->
    <pagination v-show="total>0" :background="bkcolor" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>

<script>
  /* eslint-disable */
  import Pagination from '@/components/Pagination/index'
export default {
  components: { Pagination },
  data() {
    return {
      selectDate: [],
      bkcolor: false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },
      list: null,
      formInline: {
        id: '',
        projectName: '',
        tester: '',
        testSchedule: '',
        testTime: '',
        testBug: '',
        requirementsChange: '',
        risk: '',
        tomorrowPlan: '',
        botName: '',
        emailAddress: '',
        createTime: '',
        remark: ''
      }
    }
  },
  // vue生命周期钩子函数
  created() {
    this.getList()
  },
  methods: {
    queryResult() {
      // 因为axios内部的then内部的this是指的axios对象，而不是当前vue的对象，因此把当前Vue的对象用vm声明，这样this就不会冲突
      var vm = this
      this.axios({
        method: 'GET',
        url: 'http://localhost:8080/testDaily/getTestTime?startTime=' + vm.selectDate[0] +"&endTime="+vm.selectDate[1]
      }).then(response => {
        // 得到一个PageInfo对象
        this.total = response.data.total// 将PageInfo中的total赋给vm的total
        this.list = response.data.list// 当前页显示的所有数据
      })
    },
    onSubmit() {
      console.log('submit!')
    },
    getList() {
      var vm = this
      this.axios({
        method: 'GET',
        url: 'http://localhost:8080/testDaily/getPage?pageNum=' + vm.listQuery.page + '&pageSize=' + vm.listQuery.limit
      }).then(function(response) {
        // 得到一个PageInfo对象
        vm.total = response.data.total// 将PageInfo中的total赋给vm的total
        vm.list = response.data.list// 当前页显示的所有数据
      })
    },
    addTestDaily() {
      this.$router.push('/addTestDaily')
    },
    testDailyDetail(id){
      this.$router.push({
        path:'/testDailyDetail/'+id,
        // query:{
        //   id: id
        // }
      })
    },
    editTestDaily(id) {
     this.$router.push({
       name: 'editTestDaily',
       query:{
         id: id
       }
     })
    },
    deteleteTestDaily(id) {
      var vm = this
      this.axios({
        method: 'GET',
        url: 'http://localhost:8080/testDaily/deleteTestDaily?id=' + id
      }).then(resp => {
        // eslint-disable-next-line eqeqeq
        if (resp.data == 'success') {
          // 弹框
          vm.$message({
            message: '删除成功',
            type: 'success'
          })
          // 重新获取列表信息
          this.getList()
        } else {
          vm.$message.error('删除失败')
        }
        // eslint-disable-next-line handle-callback-err
      }).catch(function(error) {
        // 弹框
        vm.$message.error('删除失败')
      })
    }

  }
}
</script>

